.loader{
	position: fixed;
	overflow: hidden;
	background-size: 100%;
	height: 100%;
	width: 100%;
	/*background: #e7e7e7;
	background: url(../images/jc_bg.jpg) center center no-repeat;
	background-size: cover;*/
	background-image: radial-gradient(#f2f2f2, #e2e2e2);
}
/*.loader_bg{ width: 100%; height: 100%; position:absolute; z-index: 2;}
.loader_bg img{ width: 100%; height: 100%; object-fit: cover; }
.loader_xian{ position: absolute; z-index: 1; top: 45%; transform:translateY(-50%); left: -20%; animation: bounce 6s infinite;}*/
.loader_cont{ text-align: center; width: 100%; position: absolute; z-index: 9; top: 50%; transform:translateY(-50%);}
.loader_logo{  margin-bottom: 100px;}
.loader_title{ color: #ff6600; font-size: 16px;  margin-bottom: 80px; }
.loader_title img{ margin-right: 5px;}
.loader_more{ padding: 4px 20px; border: 1px solid #ff6600;  color: #ff6600; transition: 0.5s;  display: inline-block; border-radius: 100px; cursor: pointer;}
.loader_more:hover{ background-color:#ff6600 ; color: #fff;}

@keyframes bounce{
	0% { left: -20%;}
    100% { left: 40%;}
}
@media screen and (max-width:1500px){
	@keyframes bounce{
		0% { left: -20%;}
		100% { left: 35%;}
	}
}
@media screen and (max-width:999px){
	@keyframes bounce{
		0% { left: -20%;}
		100% { left: 30%;}
	}
}
@media screen and (max-width:799px){
	.loader_bg img{ width: 250%; left: 50%; transform: translateX(-30%);}
	@keyframes bounce{
		0% { left: -20%;}
		100% { left: 25%;}
	}
}
@media screen and (max-width:599px){
	.loader_logo{ margin-bottom: 80px;}
	.loader_logo img{  height: 30px;}
	/*.loader_xian{  animation: bounce 6s infinite;}
	.loader_xian img{ height: 80px;}*/
	@keyframes bounce{
		0% { left: -100%;}
		100% { left: 100%;}
	}
}



.loader_xian_kuan{ position: absolute; z-index: 1; top: 48%; transform:translateY(-50%); left: 0; width: 100%;}
.loader_xian_bg{ position: absolute; width: 100%; height: 2px; top: 36%;  left: 0; background: #fff;display: none;}
.loader_xian{ float: left; width: 20%; position: relative; height: 50px; z-index: 2; text-align: center;  }
.loader_xian canvas {  width: 60% !important;  /*background: #e7e7e7;*/  opacity: 0.5;}
.loader_sj canvas{ top: -3.5px; position: relative;}
/*
.loader_xian:before{  content: ''; z-index: 1; position: absolute; width: 20%; height: 2px; left: 20%; top: 18px; transform: translateX(-20%); background-image: linear-gradient(to right,#fff 20%, #ffffff00); }
.loader_xian:after{  content: ''; z-index: 1; position: absolute; width: 20%; height: 2px;  right: 15%; top: 18px; transform: translateX(-20%); background-image: linear-gradient(to left,#fff , #ffffff00); }
*/

.loader_xian:before{ content: ''; z-index: 1; position: absolute; width: 25%; height: 2px; left: 0%; top: 18px; background-image: linear-gradient(to right,#f3f3f3 80%, transparent);}
.loader_xian:after{ content: ''; z-index: 1; position: absolute; width: 25%; height: 2px;  right: 0%; top: 18px; background-image: linear-gradient(to left,#f3f3f3 80%, transparent);  }
#loader_xian2 canvas{   width: 100% !important;}
#loader_xian2:before{ width: 15%; background-image: linear-gradient(to right,#f3f3f3 30%, transparent);}
#loader_xian2:after{ width: 15%; background-image: linear-gradient(to left,#f3f3f3 30%, transparent);}

@keyframes bounce2{
    100% { left: 0%;}
}
@media screen and (max-width:999px){
	.loader_xian{ display: none;}
	#loader_xian2{ display: block; float: none; left: 50%;	transform: translateX(-50%); width: 50%;}
	.loader_xian canvas,#loader_xian2 canvas{ top: -3.5px; position: relative;}
	.loader_xian:before,#loader_xian2:before { left: -50%;   width: 75%;}
	.loader_xian:after,#loader_xian2:after{right: -50%;  width: 75%;}
}
@media screen and (max-width:599px){
	#loader_xian2{  width: 80%;}
	.loader_xian:before,#loader_xian2:before { left: -15%;   width: 40%;}
	.loader_xian:after,#loader_xian2:after{right: -15%;  width: 40%;}
}